<template>
  <div>
    <el-container>
      <el-header>
        <sidebary class="marfc" />
      </el-header>
      <el-main>
        <div class="Searchbox">
          <el-card class="box-card" shadow="never">
            <el-form ref="form" :model="form" label-width="80px">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item label="问卷名称">
                    <el-input v-model="seleceDeptToPage.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button type="primary" @click="getCompanyToPages(1)" icon="el-icon-search">搜索</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <br />
          <el-card class="box-card" shadow="never">
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="questionName" label="问卷名称" width="200"></el-table-column>
              <el-table-column prop="year" label="年份" width="100"></el-table-column>
              <el-table-column prop="evaluationTypeName" label="评价类型" width="100"></el-table-column>
              <el-table-column prop="questionTypeName" label="问卷类型" width="100"></el-table-column>
              <el-table-column prop="isCommit" label="是否提交" width="100">
                <template slot-scope="scope">
                  <span v-html="scope.row.isCommit=='N'?'未提交':'已提交'"></span>
                </template>
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间" width="150">
                <template slot-scope="scope">{{scope.row.startTime | time}}</template>
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间" width="150">
                <template slot-scope="scope">{{scope.row.endTime | time}}</template>
              </el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row.questionId,scope.row.questionTypeId,true),disabled = true" type="text" size="small">查看</el-button>
                  <el-button v-if=" !scope.row.isExpire " @click="handleClick(scope.row.questionId,scope.row.questionTypeId,false),disabled = false" type="text" size="small">答题</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagebox">
              <el-pagination background layout="prev, pager, next" :page-size="seleceDeptToPage.pageSize" :total="dataCount" @current-change="handleCurrentChange"></el-pagination>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="50%">
      <el-form :model="form" label-position="right" :disabled="disabled" v-for="(item , index) in AddDeptData" v-if="questionTypeId=='cf6d84eb727b48519f31d5362abf7153'">
        <el-form-item label="问卷名称：" label-width="100px">{{item.questionName}}</el-form-item>
        <el-form-item label="年份：" label-width="100px">{{item.year}}</el-form-item>
        <el-form-item label="评价类型：" label-width="100px">{{item.evaluationTypeName}}</el-form-item>
        <el-form-item label="问卷类型：" label-width="100px">{{item.questionTypeName}}</el-form-item>
        <el-row :gutter="10" v-for="(items , i) in item.details">
          <el-col :span="8">
            <el-form-item label="评价：" label-width="100px">{{items.optionsName}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="被评价：" label-width="100px">{{items.coverOptionsName}}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="得分：" label-width="100px">
              <el-input style=" width: 100px;" type="number" v-model="items.optionsResult"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form :model="form" label-position="right" :disabled="disabled" v-for="(item , index) in AddDeptData" v-if="questionTypeId=='54e3da78fb334841bb5cce4a6b927c7d'">
        <template v-if="index==0">
          <el-form-item label="问卷名称：" label-width="100px">{{item.questionName}}</el-form-item>
          <el-form-item label="年份：" label-width="100px">{{item.year}}</el-form-item>
          <el-form-item label="评价类型：" label-width="100px">{{item.evaluationTypeName}}</el-form-item>
          <el-form-item label="问卷类型：" label-width="100px">{{item.questionTypeName}}</el-form-item>
          <el-divider></el-divider>
        </template>

        <el-form-item label="部门名称：" label-width="100px">{{item.coverDeptName}}</el-form-item>
        <el-row :gutter="10" v-for="(items , i) in item.details">
          <el-col :span="8">
            <el-form-item label="评价：" label-width="100px">{{items.optionsName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="得分：" label-width="100px">
              <el-input style=" width: 100px;" type="number" v-model="items.optionsResult"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="原因：" label-width="100px">
              <el-input type="textarea" v-model="items.reason"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </el-form>

      <el-form :model="form" label-position="right" :disabled="disabled" v-for="(item , index) in AddDeptData" v-if="questionTypeId=='7c680ab28aa1454ebbb15c9ae1965876'">
        <template v-if="index==0">
          <el-form-item label="问卷名称：" label-width="100px">{{item.questionName}}</el-form-item>
          <el-form-item label="年份：" label-width="100px">{{item.year}}</el-form-item>
          <el-form-item label="评价类型：" label-width="100px">{{item.evaluationTypeName}}</el-form-item>
          <el-form-item label="问卷类型：" label-width="100px">{{item.questionTypeName}}</el-form-item>
          <el-divider></el-divider>
        </template>

        <el-form-item label="部门名称：" label-width="100px">{{item.coverDeptName}}</el-form-item>

        <!-- <el-form-item label="服务质量：" label-width="100px"></el-form-item> -->
        <h4>服务质量：</h4>
        <el-row :gutter="10" v-for="(items , i) in item.details" v-if="items.dataType=='quality'">
          <el-col :span="8">
            <el-form-item label="评价：" label-width="100px">{{items.optionsName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="得分：" label-width="100px">
              <el-input style=" width: 100px;" type="number" v-model="items.optionsResult"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="原因：" label-width="100px">
              <el-input type="textarea" v-model="items.reason"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-form-item label="核心工作：" label-width="100px"></el-form-item> -->

        <h4>核心工作:</h4>

        <el-row :gutter="10" v-for="(items , i) in item.details" v-if="items.dataType=='work'">
          <el-col :span="8">
            <el-form-item label="评价：" label-width="100px">{{items.optionsName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="得分：" label-width="100px">
              <el-input style=" width: 100px;" type="number" v-model="items.optionsResult"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="原因：" label-width="100px">
              <el-input type="textarea" v-model="items.reason"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider></el-divider>
      </el-form>

      <div slot="footer" class="dialog-footer" v-if="!disabled">
        <el-button type="primary" v-if="flag==2" @click="doUpdateHistoryDetail('Y')">提 交</el-button>
        <el-button type="primary" v-if="flag==2" @click="doUpdateHistoryDetail('N')">暂 存</el-button>
        <el-button type="primary" v-if="flag==2" @click="dialogFormVisible = false,AddDeptData = {}">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import sidebary from "@/components/sidebary";

import {
  getQuestionHistoryToPage,
  getHistoryDetailByQuestionId,
  UpdateHistoryDetail,
  getDictionariesByType,
} from "@/api/api";

export default {
  data() {
    return {
      title: "",
      flag: 0,
      dialogFormVisible: false,
      disabled: true,
      seleceDeptToPage: {
        name: "",
        pageIndex: 1,
        pageSize: 10,
      },
      form: {},
      AddDeptData: {},
      tableData: [],
      dataCount: 0,

      DeptToPage: [],
      CompanyToPages: [],

      DoPassWord: {
        oldPassWord: "",
        newPassWord: "",
      },

      options: [],
      evaluateTypeData: [],
      questionTypeId: "",
    };
  },
  mounted() {
    let that = this;
    // that.getDictionariesByTypes("questionType");
    // that.getDictionariesByTypes("evaluateType");
    that.getCompanyToPages(1);
  },

  components: {
    sidebary,
  },

  filters: {
    time(value) {
      let time = value.replace(/T/g, "");
      time = time.slice(0, time.length - 8);
      return time;
    },
  },

  methods: {
    async doUpdateHistoryDetail(flag) {
      let that = this;
      if (flag == "Y") {
        let panduan = true;
        let kong = true;
        for (let i = 0; i < that.AddDeptData.length; i++) {
          that.AddDeptData[i].isCommit = "Y";
          for (let e = 0; e < that.AddDeptData[i].details.length; e++) {
            if (that.AddDeptData[i].details[e].optionsResult < 60 && that.AddDeptData[i].details[e].optionsResult != 0) {
              panduan = false;
            }
            if (that.questionTypeId !== "cf6d84eb727b48519f31d5362abf7153") {
              if (
                that.AddDeptData[i].details[e].reason == null ||
                that.AddDeptData[i].details[e].reason == ""
              ) {
                kong = false;
              }
            }
          }
        }
        if (!panduan) {
          this.$message.error("分数不得小于60分！");
          return;
        }
        if (!kong) {
          this.$message.error("原因不得为空！");
          return;
        }
      }
      let params = that.AddDeptData;
      // return;
      let res = await UpdateHistoryDetail(params);
      if (res.data.Code == 200) {
        this.$message.success(res.data.Msg);
        that.dialogFormVisible = false;
        that.getCompanyToPages(1);
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },

    async doDeleteDept(id) {
      let that = this;
      let params = {
        id: id,
      };
      let res = await DeleteUser(params);
      if (res.data.Code == 200) {
        this.$message.success(res.data.Msg);
        that.getCompanyToPages(1);
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },

    async doupdateDeptMessage() {
      let that = this;
      let params = that.AddDeptData;
      let res = await updateUserMessage(params);
      if (res.data.Code == 200) {
        this.$message.success(res.data.Msg);
        that.dialogFormVisible = !that.dialogFormVisible;
        that.getCompanyToPages(1);
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },

    async handleClick(id, questionTypeId, disabled) {
      let that = this;
      that.questionTypeId = questionTypeId;
      that.flag = 2;
      that.title = "答题";
     
      let params = {
        questionId: id,
      };
      let res = await getHistoryDetailByQuestionId(params);
      if (res.data.Code == 200) {
        that.AddDeptData = res.data.Data;
      if(disabled){
        //查看
          this.$router.push({ path: "/answer", query: {
            id:id,
            questionTypeId:questionTypeId
          } });
      }else{
        //编辑
          this.$router.push({ path: "/answers", query: {
            id:id,
            questionTypeId:questionTypeId
          } });
      }
        

        // if (!that.disabled) {
        //   // this.$router.push({ path: "/answer", query: {
        //   //   id:id,
        //   //   questionTypeId:questionTypeId,
        //   //   disabled:disabled
        //   // } });
        // }else{
        //   //  that.dialogFormVisible = !that.dialogFormVisible;
        // }
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },

    async getaddCompany() {
      let that = this;
      let params = that.AddDeptData;
      let res = await addUser(params);
      if (res.data.Code == 200) {
        this.$message.success(res.data.Msg);
        that.dialogFormVisible = false;
        that.getCompanyToPages(1);
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },

    handleCurrentChange(val) {
      let that = this;
      that.seleceDeptToPage.pageIndex = val;
      that.getCompanyToPages(val);
    },

    async getCompanyToPages(index) {
      let that = this;
      that.seleceDeptToPage.pageIndex = index;
      let params = that.seleceDeptToPage;
      let res = await getQuestionHistoryToPage(params);
      if (res.data.Code == 200) {
        that.tableData = res.data.Data;
        that.dataCount = res.data.dataCount;
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },
  },
};
</script>

<style scoped>
.Searchbox {
}

.box-card {
  width: 80%;
  margin: 0 auto;
}
.marfc {
  width: 80%;
  margin: 0 auto;
}
h4 {
  margin-left: 20px;
}
</style>